<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Orange &mdash; Free Website Template, Free HTML5 Template by FreeHTML5.co</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Free HTML5 Website Template by FreeHTML5.co" />
    <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />

    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
    <meta name="twitter:card" content="" />

    <link href='https://fonts.googleapis.com/css?family=Work+Sans:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">

    <!-- Animate.css -->
    <link rel="stylesheet" href="__CSS__/index/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="__CSS__/index/icomoon.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="__CSS__/index/bootstrap.css">
    <!-- Theme style  -->
    <link rel="stylesheet" href="__CSS__/index/style.css">
    <link href="__CSS__/specshop.css" rel="stylesheet">
    <script src="__JS__/jquery-1.8.3.min.js"></script>
    <!-- Modernizr JS -->
    <script src="__JS__/index/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="__JS__/index/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
    <nav class="fh5co-nav" role="navigation">
        <div class="container">
            <div class="row">
                <div class="left-menu text-right menu-1">
                    <ul>
                        <li class="has-dropdown">
                            <a href="{:url('Services/index')}">旅行吧、骚年！</a>
                            <ul class="dropdown">
                                <li><a href="{:url('Tourism/tourism')}">景点</a></li>
                                <li><a href="{:url('Tourism/tourism_route')}">路线</a></li>
                                <li><a href="{:url('Tourism/tourism_guide')}">导游</a></li>
                                <li><a href="{:url('Tourism/agritainment')}">农家乐</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown">
                            <a href="{:url('Hotel/index')}">酒店</a>
                            <ul class="dropdown">
                                <li><a href="#">国内</a></li>
                                <li><a href="#">国际</a></li>
                            </ul>
                        </li>
                        <li><a href="{:url('Specialty/index')}">吃货世界</a></li>
                    </ul>
                </div>
                <div class="logo text-center">
                    <div id="fh5co-logo"><a href="{:url('Index/index')}">坪行網</a></div>
                </div>
                <div class="right-menu text-left menu-1">
                    <ul>
                        <li><a href="http://www.12306.cn/mormhweb/">在线票务</a></li>
                        <li><a href="{:url('About/index')}">关于我们</a></li>
                        <li><a href="{:url('Personal/index')}">个人中心</a></li>
                        <li>
                            {$username}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <header id="fh5co-header" class="fh5co-cover fh5co-cover-sm" role="banner">
        <div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center">
                    <div class="display-t">
                        <div class="display-tc animate-box" data-animate-effect="fadeIn">
                            <h1>吃货 世界</h1>
                            <!--<h2>Free html5 templates Made by <a href="http://freehtml5.co" target="_blank">freehtml5.co</a></h2>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div id="fh5co-project" >
        <div class="container" >
            {volist name="list" id="v"}
            <h3 style="font: 2.5rem bold 微软雅黑;color: cornflowerblue">{$v.name}</h3>
            <div class="row">
                <div class="col-md-5 col-xs-12">
                    <div id="tabContent" style="border: 0rem solid red;width:15rem;height: 17rem; ">
                        <div class="col-xs-4" style="width: 25rem;height: 17rem;"><img id="imgs" class="col-xs-4 img-responsive" alt="Cinque Terre" src="__UPLOADS__/{$li[$key]['img'][0]}" style="width: 25rem;height: 17rem;" ></div>
                        <div class="col-xs-4" style="width: 25rem;height: 17rem;"><img class="col-xs-4 img-responsive" alt="Cinque Terre" src="__UPLOADS__/{$li[$key]['img'][1]}"  style="width:25rem;height: 17rem;"></div>
                        <div class="col-xs-4" style="width: 25rem;height: 17rem;"><img class="col-xs-4 img-responsive" alt="Cinque Terre" src="__UPLOADS__/{$li[$key]['img'][2]}"  style="width: 25rem;height: 17rem;" ></div>
                    </div>
                    <div class="row" style="margin-top: 1rem ">
                        <ul id="tabTitle">
                            <li><img class="col-xs-3" src="__UPLOADS__/{$li[$key]['img'][0]}" style="width: 6rem;height: 4rem;"></li>
                            <li><img class="col-xs-3" src="__UPLOADS__/{$li[$key]['img'][1]}"  style="width:6rem;height: 4rem;"></li>
                            <li><img class="col-xs-3" src="__UPLOADS__/{$li[$key]['img'][2]}" style="width:6rem;height: 4rem;"></li>
                        </ul>
                    </div>
                </div>
                <div  class="col-md-2 col-xs-12" style="height: 3.5rem"></div>
                <div class="col-md-5 col-xs-12">
                    <p>商品编号：<span style="font: 1.5rem bold 微软雅黑;" >{$v.id}</span></p>
                    <p>商品简介：<span style="font: 1rem bold 微软雅黑;">{$v.introduce}</span></p>
                    <p>商品产地：<span style="font: 1rem bold 微软雅黑;">{$v.address_t}</span></p>
                    <span>特价：<em style="font-size: 1.5rem;color: red" id="amounts">{$v.amounts}</em>元</span>
                    <p></p>
                    <div style="margin-top:10px">
                        <table>
                            <tr>
                                <td id="aaa">
                                    <span>单价:</span><span class="price">{$v.amounts}</span>
                                    <input class="min" name="" type="button" value="-" />
                                    <input class="text_box" name="" type="text" value="1" style="width: 2rem;">
                                    <input class="add" name="" type="button" value="+" />
                                </td>
                            </tr>
                        </table>
                        <br/>
                        <p>总价：<label id="total"></label></p>
                        <div class="row">
                            <div class="col-md-6 col-xs-6 col-xs-offset-1" style="width: 8rem;height: 3.5rem;background-color: coral;line-height:3.5rem;" >
                                <a content="{$v.id}" id="gwc" style="font-size:1rem;color: whitesmoke; cursor:pointer">加入购物车</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/volist}
        </div>
    </div>
    <div id="fh5co-started">
        <div class="container">
            <div class="row animate-box">
                <div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
                    <h2>Lets Get Started</h2>
                    <p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
                </div>
            </div>
            <div class="row animate-box">
                <div class="col-md-8 col-md-offset-2">
                    <form class="form-inline">
                        <div class="col-md-6 col-md-offset-3 col-sm-6">
                            <button type="submit" class="btn btn-default btn-block">Get In Touch</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <footer id="fh5co-footer" role="contentinfo">
        <div class="container">
            <div class="row row-pb-md">
                <div class="col-md-2 col-sm-4 col-xs-6">
                    <ul class="fh5co-footer-links">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Help</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Terms</a></li>
                        <li><a href="#">Meetups</a></li>
                    </ul>
                </div>

                <div class="col-md-2 col-sm-4 col-xs-6">
                    <ul class="fh5co-footer-links">
                        <li><a href="#">Shop</a></li>
                        <li><a href="#">Privacy</a></li>
                        <li><a href="#">Testimonials</a></li>
                        <li><a href="#">Handbook</a></li>
                        <li><a href="#">Held Desk</a></li>
                    </ul>
                </div>

                <div class="col-md-2 col-sm-4 col-xs-6">
                    <ul class="fh5co-footer-links">
                        <li><a href="#">Find Designers</a></li>
                        <li><a href="#">Find Developers</a></li>
                        <li><a href="#">Teams</a></li>
                        <li><a href="#">Advertise</a></li>
                        <li><a href="#">API</a></li>
                    </ul>
                </div>
                <div class="col-md-4 col-sm-12 col-xs-12 fh5co-widget col-md-push-1">
                    <h3>A Little About Orange</h3>
                    <p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit. Eos cumque dicta adipisci architecto culpa amet.</p>
                    <p><a href="#">Learn More</a></p>
                </div>
            </div>

            <div class="row copyright">
                <div class="col-md-12 text-center">
                    <p>
                        <small class="block">&copy; 2016 Free HTML5. All Rights Reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></small> <small class="block"></small>
                    </p>
                    <p>
                    <ul class="fh5co-social-icons">
                        <li><a href="#"><i class="icon-twitter"></i></a></li>
                        <li><a href="#"><i class="icon-facebook"></i></a></li>
                        <li><a href="#"><i class="icon-linkedin"></i></a></li>
                        <li><a href="#"><i class="icon-dribbble"></i></a></li>
                    </ul>
                    </p>
                </div>
            </div>

        </div>
    </footer>
</div>

<div class="gototop js-top">
    <a href="#" class="__JS__/index-gotop"><i class="icon-arrow-up"></i></a>
</div>
<!-- jQuery -->
<script src="__JS__/index/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="__JS__/index/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="__JS__/index/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="__JS__/index/jquery.waypoints.min.js"></script>
<!-- Main -->
<script src="__JS__/index/main.js"></script>

</body>
</html>
<script type='text/javascript'>
    //内容体
    var tabContent=document.getElementById("tabContent");
    var contents=tabContent.getElementsByTagName("div");
    //标题
    var tabTitle=document.getElementById("tabTitle");
    var titles=tabTitle.getElementsByTagName("li");  //数组
    //给标题 循环绑定事件
    for(var i=0;i<titles.length;i++){
        titles[i].index=i;  //注意这里 先给每个对象添加一个index属性，用来记录它是第几个
        titles[i].onmouseover=function(){
            //先让所有的内容 都隐藏
            for(var i=0;i<contents.length;i++){
                contents[i].style.display="none";
            }
            //再让 鼠标移入的对应内容显示
            contents[this.index].style.display="block";
        }
    }


    $(function(){
        $(".add").click(function(){
            var t=$(this).parent().find('input[class*=text_box]');
            t.val(parseInt(t.val())+1);
            setTotal();
        });
        $(".min").click(function(){
            var t=$(this).parent().find('input[class*=text_box]');
            t.val(parseInt(t.val())-1);
            if(parseInt(t.val())<1){
                t.val(1);
            }
            setTotal();
        });
        function setTotal(){
            var s=0;
            $("#aaa").each(function(){
                s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text());
            });
            $("#total").html(s.toFixed(2));
        }
        setTotal();
    });


    a = "{:url('Specialty/car')}";
    b = "{:url('Specialty/specgm')}";
    $("body").on("click","#gwc",function(){
        $.ajax({
            type:"post",
            url:a,
            dataType:"text",
            data:{
                special_id:$(this).attr("content"),
                number:$('.text_box').val()
//                amounts:$('#amounts').html(),
            },
            success:function(msg){
                if(msg=="true"){
                    window.location.href= b ;
                }else{
                    alert("出错了")
                }
//                    window.location.href= a ;
            }
        })
    })

</script>

